<template>
  <div class="energy-min-container">

    <div class="energy-min-container-header">
      <!-- <div class="header-item" v-for="(item, index) in headerItems" :key="index">
        <div class="item-value">{{item.val}}</div>
        <div class="item-title">{{item.title}}</div>
      </div> -->
      <div class="header-item">
        <div class="item-value">2559</div>
        <div class="item-title">今日用电量 (kwh)</div>
      </div>
      <div class="header-item">
        <div class="item-value">1477</div>
        <div class="item-title">昨日同期 (kwh)</div>
      </div>
      <div class="header-item">
        <div class="item-value">1793</div>
        <div class="item-title">去年同期 (kwh)</div>
      </div>
      <div class="header-item">
        <div class="item-value">
          <span>73.3%</span>
          <i class="el-icon-bottom" style="line-height: 0; font-weight: bold;"></i>
        </div>
        <div class="item-title">环比</div>
      </div>
      <div class="header-item">
        <div class="item-value">
          <span>42.7%</span>
          <i class="el-icon-top" style="line-height: 0; font-weight: bold;"></i>
        </div>
        <div class="item-title">同比</div>
      </div>
    </div>

    <div class="energy-min-container-middle">
      <div class="middle-item">
        <!-- <div class="mddile-item-content">标煤单耗</div>
        <div class="middle-abs-item middle-abs-item-1">
          <span>D</span>
          <span class="middle-abs-item-value">3432</span>
        </div>
        <div class="middle-abs-item middle-abs-item-2">
          <span>C</span>
          <span class="middle-abs-item-value">3432</span>
        </div>
        <div class="middle-abs-item middle-abs-item-3">
          <span>MODAR</span>
          <span class="middle-abs-item-value">3432</span>
        </div>
        <div class="middle-abs-item middle-abs-item-4">
          <span>DT</span>
          <span class="middle-abs-item-value">3432</span>
        </div>
        <div class="middle-abs-item middle-abs-item-5">
          <span>FPY</span>
          <span class="middle-abs-item-value">3432</span>
        </div>
        <div class="middle-abs-item middle-abs-item-6">
          <span>CQY</span>
          <span class="middle-abs-item-value">3432</span>
        </div> -->
      </div>
    </div>

    <div class="energy-min-container-footer">
      <div class="footer-item">
        <span>马安厂</span>
        <img :src="factoryPng" />
      </div>
      <div class="footer-item footer-item2">
        <span>潼湖厂</span>
        <img :src="factory2Png" />
      </div>
      <div class="footer-item">
        <span>深圳总部</span>
        <img :src="factoryPng" />
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'EnergyMinMiddleCmp',
  data () {
    return {
      bigPng: require("../../assets/big.png"),
      factoryPng: require("../../assets/factory1.png"),
      factory2Png: require("../../assets/factory2.png"),
      headerItems: [
        { title: '今日用电量 (kwh)', val: '2559'},
        { title: '昨日同期 (kwh)', val: '1477'},
        { title: '去年同期 (kwh)', val: '1793'},
        { title: '环比', val: '73.3%'},
        { title: '同比', val: '42.7%'},
      ]
    }
  },
  mounted() {
    
  },
  methods: {
    initCharts0(){
      
    },
    
  },
}
</script>

<style lang="scss" scoped>
.energy-min-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .energy-min-container-header {
    width: 80%;
    display: flex;
    justify-content: center;

    border: 2px solid;
    border-image: linear-gradient(45deg, rgba(2, 9, 22, 0), rgba(55, 108, 255, 1), rgba(4, 10, 23, 0)) 2 2;
    border-top: none;
    border-left: none;
    border-right: none;
    justify-content: space-between;
    align-self: center;

    .header-item {
      text-align: center;
      font-weight: 600;
      margin: 20px;

      .item-value {
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #00E5FF;
        // margin-bottom: 20px;
      }

      .item-title {
        font-size: 14px;
        margin-top: 10px;
        font-weight: bold;
        font-family: HarmonyOS_Sans_SC_Bold;
        color: #FFFFFF;
      }
    }
  }

  .energy-min-container-middle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    
    .middle-item {
      position: relative;
      width: 100%;
      height: 100%;
      // height: 400px;
      display: flex;
      
      justify-content: center;
      align-items: center;
      
      // background-image:url('../../assets/energy-middle.png');
      background-image:url('../../assets/cab_bg2.png');
      background-repeat:no-repeat;
      background-position: center center;
      background-size: 90% auto;
      background-attachment:fixed;
      // background-size: 400px auto;

      .mddile-item-content {
        font-size: 36px;
        font-family: YouSheBiaoTiHei;
        color: #20409A;
        font-style: italic;
        font-weight: 600;
      }

      .middle-abs-item {
        position: absolute;
        width: 90px;
        height: 48px;
        background: rgba(40,69,151,0.6);
        box-shadow: inset 0px 0px 18px 0px #007DFF;
        border: 2px solid;
        border-image: linear-gradient(225deg, rgba(0, 141, 255, 1), rgba(0, 139, 255, 0), rgba(0, 135, 255, 1)) 2 2;
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        // color: #FF0000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .middle-abs-item-value {
          color: #FFF;
          margin-top: 5px;
        }

      }

      .middle-abs-item-1 {
        left: -100px;
        top: 30px;
        color: #FF0000;
      }

      .middle-abs-item-2 {
        left: -120px;
        top: 240px;
        color: #B000FF;
      }

      .middle-abs-item-3 {
        right: 20px;
        top: 348px;
        color: #284597;
      }

      .middle-abs-item-4 {
        right: -120px;
        top: 240px;
        color: #00DBFF;
      }

      .middle-abs-item-5 {
        right: -80px;
        top: 30px;
        color: #00B31C;
      }

      .middle-abs-item-6 {
        left: 120px;
        top: -64px;
        color: #FFB300;
      }
    }
  }

  .energy-min-container-footer {
    margin: auto;
    margin-top: 40px;
    width: 80%;
    display: flex;
    justify-content: center;

    .footer-item {
      // margin-right: 102px;
      position: relative;
      display: flex;
      justify-content: center;
      flex: 1;

      span {
        position: absolute;
        font-size: .25rem;
        font-family: YouSheBiaoTiHei;
        color: #00E5FF;
        font-weight: 600;
      }
      img {
        margin-top: 10px;
        width: 1.550rem;
        height: 1.3875rem;
      }
    }

    .footer-item2 {
      img {
        width: 1.7375rem;
        height: 1.5125rem;
      }
      span {
        font-size: .35rem;
      }
    }
  }
}
</style>
